<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-07-12 17:48:44
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-07-17 13:16:39
 * @FilePath: \出口卖家端\src\views\IndividualCenter\ChangePassword\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <c-main-template :isBreadcrumb="false">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      status-icon
      label-position="top"
    >
      <div class="change-pass">
        <el-form-item label="旧密码" prop="pwd">
          <el-input
            type="password"
            show-password
            size="large"
            v-model="ruleForm.pwd"
            placeholder="请输入旧密码"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input
            type="password"
            show-password
            v-model="ruleForm.newPwd"
            size="large"
            placeholder="密码由6-18位数字与字母、符号组成"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="cPwd">
          <el-input
            type="password"
            show-password
            size="large"
            v-model="ruleForm.cPwd"
            placeholder="再次输入密码"
          />
        </el-form-item>
        <div class="mt-50">
          <el-button :loading="loading" @click="handleSubmt" size="large" type="primary"
            >确认修改</el-button
          >
        </div>
      </div>
    </el-form>
  </c-main-template>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { deepClone } from "@/utils/index.js";
import { ElMessage } from "element-plus";
import { clearLoginInfo } from "@/utils/cache.js";
import { useRouter } from "vue-router";
const router = useRouter();
const ruleForm = ref({});
const { proxy } = getCurrentInstance();
const ruleFormRef = ref();
const loading = ref(false);
const handleSubmt = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      const params = deepClone(ruleForm.value);
      proxy
        .$get({
          url: "/seller/pwd/modify",
          params,
        })
        .then(
          (res) => {
            ruleForm.value = {};
            loading.value = false;
            clearLoginInfo();
            ElMessage.success("修改成功,请重新登陆！");
            router.push("/login");
          },
          () => {
            loading.value = false;
          }
        );
    }
  });
};
const rules = ref({
  pwd: [
    {
      required: true,
      message: "请输入旧密码",
      trigger: "blur",
    },
  ],
  newPwd: [
    {
      required: true,
      message: "请输入新密码",
      trigger: "blur",
    },
  ],
  cPwd: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("请再次确认密码"));
        } else if (ruleForm.value.newPwd !== value) {
          callback(new Error("两次密码输入不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});
</script>
<style lang="less" scoped>
.change-pass {
  width: 360px;
  margin-top: 60px;
  margin-left: 70px;
}
</style>